import React, { Component } from 'react';
import { Table, Pagination, Dialog, Button, Grid, DatePicker, Message, Form, Input, Select, CascaderSelect, Upload } from '@alifd/next';
import { withRouter } from 'react-router-dom';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import IceContainer from '@icedesign/container';
import BalloonConfirm from '@icedesign/balloon-confirm';
import Img from '@icedesign/img';
import PageHead from '../../../../components/PageHead';
import { getLocalTime } from '../../../../utils/localTime';
import Filter from '../chooseHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';
import { unit } from '../../../../utils/setting';


const { Row, Col } = Grid;
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 20,
  },
};
const formItemLayout2 = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 14,
  },
};
const formItemLayout3 = {
  labelCol: {
    fixedSpan: 10,
  },
  wrapperCol: {
    span: 12,
  },
};
function onPreview(info) {
  // console.log('onPreview callback : ', info);
}

function onChange(info) {
  // console.log('onChange callback : ', info);
}

function onError(file) {
  // console.log('onError callback : ', file);
}

// const headers = { token: sessionStorage.getItem('token') };
@withRouter
export default class Body extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      SupperDataList: [], // 供应商列表
      GoodsTypeList: [], // 个性化定制类别
      SingleGoodsData: {}, // 单个性化定制信息
      Dvisible0: false, // 非镜片详情弹窗
      Dvisible1: false, // 镜片详情弹窗
      Evisible0: false, // 非镜片编辑弹窗
      Evisible1: false, // 镜片编辑弹窗
      page: 1, // 当前页数
      search: '', // 搜索条件
      place: 0, // 供应商区域
      countPage: 0, // 总页数
      perPage: 10, // 每页数据量
      s_id: '', // 供应商id
      g_id: '', // 个性化定制ID
      class_id: '', // 个性化定制类别ID
      GoodsList: [], // 个性化定制列表
      defaultValue: [], // 图片列表
      w_id:'',
      name:""
    };
    // this.handleChangeGY = this.handleChangeGY.bind(this)
  }

  onSuccess=(res, file) => {
    // console.log('onSuccess callback : ', res, file);
    const goods_img = this.state.SingleGoodsData.goods_img || [];
    goods_img.push(res.response.url.replace(api.uri, ''));
    this.setState(
      {
        SingleGoodsData: {
          ...this.state.SingleGoodsData,
          goods_img,
        },
      }
    );
  }
  onRemove=(file) => {
    // console.log('onRemove callback : ',res,file);
    const img = file.url.replace(api.uri, '');
    const goods_img = this.state.SingleGoodsData.goods_img;
    goods_img.splice(goods_img.indexOf(img), 1);
    this.setState(
      {
        SingleGoodsData: {
          ...this.state.SingleGoodsData,
          goods_img,
        },
      }
    );
  }

// 获取个性化定制列表
getGoodsList= () => {
  service({
    method: 'get',
    url: api.GoodsList,
    params: {
      search: this.state.search || '',
      class_id: this.state.class_id || '',
      s_id: this.state.s_id || '',
      page: this.state.page || 1,
    },
  })
    .then((res) => {
      const data = res.data.list;
      this.setState(
        {
          GoodsList: data,
          countPage: res.data.count_page,
          isLoading: false,
        }
      );
    });
}
// 获取个性化定制类别列表
getGoodsTypeList= () => {
  service({
    method: 'get',
    url: api.GoodsTypeList,
  })
    .then((res) => {
      const data = res.data;
      this.setState(
        {
          GoodsTypeList: data.class_list,
        }
      );
    });
}
// 获取单个个性化定制的信息
getSingleData= (id) => {
  service({
    method: 'get',
    url: api.GoodsInfo,
    params: {
      g_id: id,
    },
  })
    .then((res) => {

      const data = res.data.goods_info;
      data.ope_time = getLocalTime(data.ope_time);
      data.pro_time = getLocalTime(data.pro_time);
      data.bus_time = getLocalTime(data.bus_time);
      data.org_time = getLocalTime(data.org_time);
      data.reg_time = getLocalTime(data.reg_time);
      const defaultValue = [];
      if (data.goods_img) {
        data.goods_img.forEach((item) => {
          defaultValue.push({ state: 'done', url: `${api.uri}${item}` });
        });
      }
      this.setState(
        {
          SingleGoodsData: data,
          defaultValue,
        }
      );
      // console.log(this.state.placeArr);
    });
}
// 修改个性化定制信息
EditGoodsData= () => {
  const id = this.state.g_id;
  const name = this.state.name
  const data = this.state.SingleGoodsData;
  service({
    method: 'post',
    url: api.GoodsChange,
    params: {
      act: 'edit',
      g_id: id,
    },
    data,
  })
    .then((res) => {
      // console.log(this.state.SupperDataList)
      if (res.data.code === 200) {
        Message.success('修改成功！');
        this.setState({
          Evisible0: false,
          Evisible1: false,
          isLoading: true,
        }, () => {
          this.getGoodsList();
        });
      } else {
        Message.error('修改失败！');
      }
    });
}
// 删除个性化定制
DelGoodsData= () => {
  const id = this.state.g_id;
  service({
    method: 'get',
    url: api.GoodsDelete,
    params: {
      g_id: id,
    },
  })
    .then((res) => {
      if (res.data.code === 200) {
        Message.success('删除成功！');
        this.setState(
          {
            isLoading: true,
          }, () => {
            this.getGoodsList();
          }
        );
      } else {
        Message.error('删除失败！');
      }
    });
}
// 获取供应商列表
  getSupperInfo= () => {
    service({
      method: 'get',
      url: api.GetSuperList,
    })
      .then((res) => {
        const data = res.data.list;
        const NewSList = [];
        if (data && data != '') {
          data.forEach((item) => {
            NewSList.push({ label: item.name, value: item.id.toString() });
          });
          NewSList.sort((item1, item2) => {
            return item1.label.localeCompare(item2.label, 'cn');
          });
          this.setState(
            {
              SupperDataList: NewSList,
            }
          );
        }
      });
  }
// 组件挂载完毕
componentDidMount() {
    // 获取供应商列表
  this.getSupperInfo();
  // 获取个性化定制列表
  this.getGoodsList();
  this.getGoodsTypeList();
}

// 换页
handlePaginationChange = (page) => {
  this.setState(
    {
      page,
      isLoading: true,
    },
    () => {
      this.getGoodsList();
    }
  );
};
// 筛选条件改变
handleFilterChange = (value) => {
  this.setState({
    s_id: value.SupperList || '',
    class_id: value.GoodsType || '',
    search: value.search || '',
    isLoading: true,
    page: 1,
  }, () => {
    this.getGoodsList();
  });
};
// 搜索事件
handleFilterSearch = (value) => {
  this.setState({
    search: value,
    isLoading: true,
    page: 1,
  }, () => {
    this.getGoodsList();
  });
};
// 点击修改
handleGoodEdit = (index) => {
  const GoodData = this.state.GoodsList;
  const id = GoodData[index].g_id;
  const GoodType = GoodData[index].goods_type;
  service({
    method: 'get',
    url: api.GoodsInfo,
    params: {
      g_id: id,
    },
  })
    .then((res) => {

      const data = res.data.goods_info;
      data.ope_time = getLocalTime(data.ope_time);
      data.pro_time = getLocalTime(data.pro_time);
      data.bus_time = getLocalTime(data.bus_time);
      data.org_time = getLocalTime(data.org_time);
      data.reg_time = getLocalTime(data.reg_time);
      const defaultValue = [];
      if (data.goods_img) {
        data.goods_img.forEach((item) => {
          defaultValue.push({ state: 'done', url: `${api.uri}${item}` });
        });
      }
      if (GoodType === 0) {
        this.setState({
          Evisible0: true,
          g_id: id,
          SingleGoodsData: data,
          defaultValue,
        });
      } else {
        this.setState({
          Evisible1: true,
          g_id: id,
          SingleGoodsData: data,
          defaultValue,
        });
      }
    });
};
// 点击详情
handleGoodDetail = (index) => {

  const GoodData = this.state.GoodsList;

  const id = GoodData[index].g_id;
  const GoodType = GoodData[index].goods_type;
  this.getSingleData(id);
  if (GoodType === 0) {
    this.setState({
      Dvisible0: true,
      g_id: id,
    });
  } else {
    this.setState({
      Dvisible1: true,
      g_id: id,
    });
  }
};
// 点击删除
handleGoodDelete = (index) => {
  const GoodsData = this.state.GoodsList;
  const id = GoodsData[index].g_id;
  this.setState(
    {
      g_id: id,
    }
  );
}
// 弹窗关闭
onClose=() => {
  this.setState({
    Dvisible0: false,
    Dvisible1: false,
    Evisible0: false,
    Evisible1: false,
  });
}
// 详情页 编辑按钮事件
handleEditBtnClick = () => {
  const GoodType = this.state.SingleGoodsData.goods_type;
  if (GoodType === 0) {
    this.setState({
      Dvisible0: false,
      Evisible0: true,
    });
  } else {
    this.setState({
      Dvisible1: false,
      Evisible1: true,
    });
  }
}
// 详情页 导出事件
handleOutBtnClick = () => {
  this.setState({
    Dvisible0: false,
    Evisible0: false,
  });
  window.location.href = `${api.Uri}/admin/Basicapi/goods_info?excel=1&g_id=${this.state.SingleGoodsData.g_id}`;
}
// 编辑页 修改提交
handleSubBtnClick = () => {
  this.EditGoodsData();
}
// 删除确认键
onConfirm = () => {
  this.DelGoodsData();
}
handleDownload = () => {
  window.location.href = `${api.uri}/admin/Basicapi/get_goods_list?excel=1&search=${this.state.search}&s_id=${this.state.s_id}&g_id=${this.state.g_id}`;
}
// 供应商改变这个是我写的单独的 下面那个是总表改变获没懂
handleChangeGY = (value) => {
  var new_SingleGoodsData = this.state.SingleGoodsData
  new_SingleGoodsData["s_id"] = value
  this.setState({
    SingleGoodsData:new_SingleGoodsData
  })
}
handleForm1Change = (value) => {
  const data = Object.assign({}, this.state.SingleGoodsData, value);
  // console.log(data)
  this.setState({
    SingleGoodsData: data,
  }, () => {
  });
}
  renderOper = (value, index) => {
    return (
      <div>
        {sessionStorage.getItem('grade') < 1 ? (<div><a style={styles.link.detail} onClick={() => this.handleGoodDetail(index)}>
          详情
                                                     </a>
          <span style={styles.separator} />
          <a style={styles.link.edit} onClick={() => this.handleGoodEdit(index)}>
          编辑
          </a>
          <span style={styles.separator} />
          <BalloonConfirm
            onConfirm={this.onConfirm}
            onCancel={this.onCancel}
            title="真的要删除这条信息吗?"
          >
            <a style={styles.link.delete} onClick={() => this.handleGoodDelete(index)}>
          删除
            </a>
          </BalloonConfirm>
                                                </div>) : (<div><a style={styles.link.detail} onClick={() => this.handleGoodDetail(index)}>
          详情
                        </a>
        </div>)}
      </div>
    );
  };
  renderCover = (value, index, record) => {
    const type = 'contain';
    let length = 0;
    let src;
    if (record.goods_img) {
      length = record.goods_img.length;
      src = `${api.uri}${record.goods_img[0]}`;
    }

    return (
      <div>
        {length > 0 ? (<div>
          <Img
            enableAliCDNSuffix={false}
            width={60}
            height={60}
            src={src}
            type={type}
            style={{ verticalAlign: 'middle',width:'100px' }}
          />
        </div>) : null}
      </div>
    );
  };

  render() {
    const { isLoading, GoodsList, GoodsTypeList, SupperDataList, SingleGoodsData, countPage, perPage, defaultValue } = this.state;

    return (
      <div style={styles.container}>
        <PageHead title="个性化定制信息筛选" />
        <IceContainer>
          <Filter onChange={this.handleFilterChange} onSearch={this.handleFilterSearch} />
        </IceContainer>
        <PageHead title="个性化定制信息列表"  onClick={this.handleDownload} />
        <Table loading={isLoading} dataSource={GoodsList} hasBorder={false} >
          <Table.Column title="封面图" dataIndex="goods_img" cell={this.renderCover} />
          <Table.Column title="个性化定制条码" dataIndex="goods_bar_code" />
          <Table.Column title="品牌" dataIndex="goods_class_name" />
          <Table.Column title="个性化定制名称" dataIndex="goods_name" />
          <Table.Column title="供应商名称" dataIndex="name" />
          {/* <Table.Column title="屈光度" dataIndex="ref_degrees" />
          <Table.Column title="散光度" dataIndex="ast_degrees" />
          <Table.Column title="镜片类型" dataIndex="lens_type" /> */}
          <Table.Column title="型号" dataIndex="model" />
          <Table.Column title="颜色/镀层" dataIndex="color_layer" />
          <Table.Column title="规格" dataIndex="spec" />
          <Table.Column title="单位" dataIndex="unit" />
          <Table.Column title="零售价" dataIndex="retail_price" />
          {sessionStorage.getItem('grade')==0?(<Table.Column title="进货价" dataIndex="buying_price" />):null}
          {/* <Table.Column title="折扣" dataIndex="rebate" /> */}
          <Table.Column title="操作" cell={this.renderOper} />
        </Table>
        {/* 个性化定制信息详情 */}
        <Dialog
          visible={this.state.Dvisible0}
          onClose={this.onClose}
          footer={sessionStorage.getItem('grade') < 1 ? (<div><Button type="primary" onClick={this.handleEditBtnClick} className="dialogButton EditBtn">编辑</Button><Button type="primary" onClick={this.handleOutBtnClick} className="dialogButton OutBtn">导出</Button></div>) : (<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn">确定</Button></div>)}
          footerAlign="center"
          id="DDialog"
          style={{ marginTop: '25px' }}
        >
          <h3 className="titleWrap"><span className="dialogTitle">个性化定制信息详情</span></h3>
         {sessionStorage.getItem('grade')==0?( <IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制条码:</Col>
              <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

              <Col span="6" className="listNameQ">供应商:</Col>
              <Col span="6">{SingleGoodsData.name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制类别:</Col>
              <Col span="6" >{SingleGoodsData.class_name}</Col>

              <Col span="6" className="listNameQ">个性化定制名称:</Col>
              <Col span="6">{SingleGoodsData.goods_name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">型号:</Col>
              <Col span="6">{SingleGoodsData.model}</Col>
              <Col span="6" className="listNameQ">颜色/膜层:</Col>
              <Col span="6" >{SingleGoodsData.color_layer}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">特殊参数:</Col>
              <Col span="6">{SingleGoodsData.case_value}</Col>
              <Col span="6" className="listNameQ">单位:</Col>
              <Col span="6" >{SingleGoodsData.unit}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">规格:</Col>
              <Col span="6">{SingleGoodsData.spec}</Col>
              <Col span="6" className="listNameQ">零售价:</Col>
              <Col span="6">{SingleGoodsData.retail_price}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">进货价:</Col>
              <Col span="6" >{SingleGoodsData.buying_price}</Col>
              <Col span="6" className="listNameQ">折扣率:</Col>
              <Col span="6">{SingleGoodsData.rebate}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">积分率:</Col>
              <Col span="6">{SingleGoodsData.integral_rate}</Col>
            </Row>
          </IceContainer>):( <IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制条码:</Col>
              <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

              <Col span="6" className="listNameQ">供应商:</Col>
              <Col span="6">{SingleGoodsData.name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制类别:</Col>
              <Col span="6" >{SingleGoodsData.class_name}</Col>

              <Col span="6" className="listNameQ">个性化定制名称:</Col>
              <Col span="6">{SingleGoodsData.goods_name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">型号:</Col>
              <Col span="6">{SingleGoodsData.model}</Col>
              <Col span="6" className="listNameQ">颜色/膜层:</Col>
              <Col span="6" >{SingleGoodsData.color_layer}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">特殊参数:</Col>
              <Col span="6">{SingleGoodsData.case_value}</Col>
              <Col span="6" className="listNameQ">单位:</Col>
              <Col span="6" >{SingleGoodsData.unit}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">规格:</Col>
              <Col span="6">{SingleGoodsData.spec}</Col>
              <Col span="6" className="listNameQ">零售价:</Col>
              <Col span="6">{SingleGoodsData.retail_price}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">折扣率:</Col>
              <Col span="6">{SingleGoodsData.rebate}</Col>
              <Col span="6" className="listNameQ">积分率:</Col>
              <Col span="6">{SingleGoodsData.integral_rate}</Col>
            </Row>
          </IceContainer>)}
        </Dialog>
        <Dialog
          visible={this.state.Dvisible1}
          // autoFocus
          onClose={this.onClose}
          footer={sessionStorage.getItem('grade') < 1 ? (<div><Button type="primary" onClick={this.handleEditBtnClick} className="dialogButton EditBtn">编辑</Button><Button type="primary" onClick={this.handleOutBtnClick} className="dialogButton OutBtn">导出</Button></div>) : (<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn">确定</Button></div>)}
          footerAlign="center"
          id="DDialog"
          style={{ marginTop: '25px' }}
        >
          <h3 className="titleWrap"><span className="dialogTitle">个性化定制信息详情</span></h3>
          {sessionStorage.getItem('grade')==0?(<IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制条码:</Col>
              <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

              <Col span="6" className="listNameQ">供应商:</Col>
              <Col span="6">{SingleGoodsData.name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制名称:</Col>
              <Col span="18">{SingleGoodsData.goods_name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制类别:</Col>
              <Col span="6" >{SingleGoodsData.class_name}</Col>
              <Col span="6" className="listNameQ">型号:</Col>
              <Col span="6">{SingleGoodsData.model}</Col>

            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">ADD:</Col>
              <Col span="6" >{SingleGoodsData.ADD}</Col>

              <Col span="6" className="listNameQ">折射率:</Col>
              <Col span="6">{SingleGoodsData.refractivity}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">是否渐进:</Col>
              <Col span="6" >{SingleGoodsData.is_gradual}</Col>

              <Col span="6" className="listNameQ">是否球面:</Col>
              <Col span="6">{SingleGoodsData.is_sphere}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              {/* <Col span="6" className="listNameQ">直径:</Col>
              <Col span="6" >{SingleGoodsData.diameter}</Col> */}

              <Col span="6" className="listNameQ">颜色/膜层:</Col>
              <Col span="6" >{SingleGoodsData.color_layer}</Col>
              <Col span="6" className="listNameQ">单位:</Col>
              <Col span="6" >{SingleGoodsData.unit}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">进货价:</Col>
              <Col span="6" >{SingleGoodsData.buying_price}</Col>

              <Col span="6" className="listNameQ">零售价:</Col>
              <Col span="6">{SingleGoodsData.retail_price}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">积分率:</Col>
              <Col span="6">{SingleGoodsData.integral_rate}</Col>
              <Col span="6" className="listNameQ">折扣率:</Col>
              <Col span="6">{SingleGoodsData.rebate}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">生产企业:</Col>
              <Col span="18">{SingleGoodsData.esta_person}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">生产许可证号:</Col>
              <Col span="6">{SingleGoodsData.pro_number}</Col>
              <Col span="6" className="listNameQ">生产许可证有效期至:</Col>
              <Col span="6">{SingleGoodsData.pro_time}</Col>

            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">经营许可证号:</Col>
              <Col span="6">{SingleGoodsData.ope_number}</Col>
              <Col span="6" className="listNameQ">经营许可证有效期至:</Col>
              <Col span="6">{SingleGoodsData.ope_time}</Col>
            </Row>

            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">注册证号:</Col>
              <Col span="6">{SingleGoodsData.reg_number}</Col>
              <Col span="6" className="listNameQ">注册证有效期至:</Col>
              <Col span="6">{SingleGoodsData.reg_time}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">有效期（月）:</Col>
              <Col span="6">{SingleGoodsData.term_time}</Col>
              <Col span="6" className="listNameQ">国际医疗器械类别编号:</Col>
              <Col span="6">{SingleGoodsData.medical_number}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">医疗器械名称:</Col>
              <Col span="6">{SingleGoodsData.medical_name}</Col>
              <Col span="6" className="listNameQ">预留1:</Col>
              <Col span="6">{SingleGoodsData.m_reserve_one}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">预留2:</Col>
              <Col span="6">{SingleGoodsData.m_reserve_two}</Col>
            </Row>
          </IceContainer>):(<IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制条码:</Col>
              <Col span="6" >{SingleGoodsData.goods_bar_code}</Col>

              <Col span="6" className="listNameQ">供应商:</Col>
              <Col span="6">{SingleGoodsData.name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制名称:</Col>
              <Col span="18">{SingleGoodsData.goods_name}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">个性化定制类别:</Col>
              <Col span="6" >{SingleGoodsData.class_name}</Col>
              <Col span="6" className="listNameQ">型号:</Col>
              <Col span="6">{SingleGoodsData.model}</Col>

            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">ADD:</Col>
              <Col span="6" >{SingleGoodsData.ADD}</Col>

              <Col span="6" className="listNameQ">折射率:</Col>
              <Col span="6">{SingleGoodsData.refractivity}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">是否渐进:</Col>
              <Col span="6" >{SingleGoodsData.is_gradual}</Col>

              <Col span="6" className="listNameQ">是否球面:</Col>
              <Col span="6">{SingleGoodsData.is_sphere}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              {/* <Col span="6" className="listNameQ">直径:</Col>
              <Col span="6" >{SingleGoodsData.diameter}</Col> */}

              <Col span="6" className="listNameQ">颜色/膜层:</Col>
              <Col span="6" >{SingleGoodsData.color_layer}</Col>
              <Col span="6" className="listNameQ">单位:</Col>
              <Col span="6" >{SingleGoodsData.unit}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">零售价:</Col>
              <Col span="6">{SingleGoodsData.retail_price}</Col>
              <Col span="6" className="listNameQ">积分率:</Col>
              <Col span="6">{SingleGoodsData.integral_rate}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">折扣率:</Col>
              <Col span="6">{SingleGoodsData.rebate}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>

              <Col span="6" className="listNameQ">生产企业:</Col>
              <Col span="18">{SingleGoodsData.esta_person}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">生产许可证号:</Col>
              <Col span="6">{SingleGoodsData.pro_number}</Col>
              <Col span="6" className="listNameQ">生产许可证有效期至:</Col>
              <Col span="6">{SingleGoodsData.pro_time}</Col>

            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">经营许可证号:</Col>
              <Col span="6">{SingleGoodsData.ope_number}</Col>
              <Col span="6" className="listNameQ">经营许可证有效期至:</Col>
              <Col span="6">{SingleGoodsData.ope_time}</Col>
            </Row>

            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">注册证号:</Col>
              <Col span="6">{SingleGoodsData.reg_number}</Col>
              <Col span="6" className="listNameQ">注册证有效期至:</Col>
              <Col span="6">{SingleGoodsData.reg_time}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">有效期（月）:</Col>
              <Col span="6">{SingleGoodsData.term_time}</Col>
              <Col span="6" className="listNameQ">国际医疗器械类别编号:</Col>
              <Col span="6">{SingleGoodsData.medical_number}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">医疗器械名称:</Col>
              <Col span="6">{SingleGoodsData.medical_name}</Col>
              <Col span="6" className="listNameQ">预留1:</Col>
              <Col span="6">{SingleGoodsData.m_reserve_one}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">预留2:</Col>
              <Col span="6">{SingleGoodsData.m_reserve_two}</Col>
            </Row>
          </IceContainer>)}
        </Dialog>

        {/* 个性化定制信息编辑 */}
        <Dialog
          id="EDialog0"
          visible={this.state.Evisible0}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleSubBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">个性化定制信息编辑</span></h3>
            <IceContainer className="dialogContent" style={{marginLeft:"60px"}}>
              <IceFormBinderWrapper
                // style={styles.form1}
                // inline
                // size="medium"
                // {...formItemLayout2}
                onChange={this.handleForm1Change}
                value={SingleGoodsData}
              >
                <Row gutter="5" wrap >
                  <Col span="24">
                    <span style={styles.SelectLabel}>个性化定制条码:</span>
                    <IceFormBinder name="goods_bar_code">
                      <Input
                        size="medium"
                        className="idStyle"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                </Row>
                <Row gutter="5" wrap>
                  <Col span="12">
                    <span style={styles.SelectLabel}>供应商</span>
                    <IceFormBinder required name="name">
                      <Select
                        size="medium"
                        style={styles.Select}
                        dataSource={SupperDataList}
                        onChange={this.handleChangeGY}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>个性化定制类别</span>
                    <IceFormBinder required name="class_id">
                      <CascaderSelect
                        expandTriggerType="hover"
                        size="medium"
                        style={styles.Select}
                        dataSource={this.state.GoodsTypeList}
                        listStyle={{ width: '180px' }}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>个性化定制名称</span>
                    <IceFormBinder required name="goods_name">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>型号</span>
                    <IceFormBinder required name="model">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>特殊参数</span>
                    <IceFormBinder required name="case_value">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>颜色/膜层</span>
                    <IceFormBinder required name="color_layer">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>单位</span>
                    <IceFormBinder required name="unit">
                      <Select
                        dataSource={unit}
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>规格</span>
                    <IceFormBinder required name="spec">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>进货价</span>
                    <IceFormBinder required name="buying_price">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>零售价</span>
                    <IceFormBinder required name="retail_price">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>积分率</span>
                    <IceFormBinder required name="integral_rate">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                  <Col span="12">
                    <span style={styles.SelectLabel}>折扣</span>
                    <IceFormBinder required name="rebate">
                      <Input
                        size="medium"
                        style={styles.Select}
                      />
                    </IceFormBinder>
                  </Col>
                </Row>
                <Upload.Card
                  listType="card"
                  action={api.GoodsImg}
                  // headers={headers}
                  accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
                  formatter={(res, file) => {
                    return {
                    success: res.code === 200,
                    url: `${api.uri}${res.img_url}`,
                  };
                  }}
                  onPreview={onPreview}
                  onChange={onChange}
                  onSuccess={this.onSuccess}
                  onError={onError}
                  onRemove={this.onRemove}
                  defaultValue={defaultValue}
                >

                </Upload.Card>
              </IceFormBinderWrapper>

            </IceContainer>
          </div>
        </Dialog>
        <Dialog
          id="EDialog1"
          visible={this.state.Evisible1}
          style={{ marginTop: '25px' }}
          footerActions={[]}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleSubBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">个性化定制信息编辑</span></h3>
            <IceContainer style={{ width: '1400px' }} className="dialogContent">
              <Row wrap>
                <Col span="11" style={{paddingLeft:'30px'}}>
                  <IceFormBinderWrapper
                    // style={styles.form}
                    // inline
                    // size="medium"
                    // {...formItemLayout2}
                    onChange={this.handleForm1Change}
                    value={SingleGoodsData}
                  >
                    <Row gutter="5" wrap >
                      <Col span="24">
                        <span style={styles.SelectLabel}>个性化定制条码:</span>
                        <IceFormBinder name="goods_bar_code">
                          <Input
                            size="medium"
                            className="idStyle"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                    </Row>
                    <Row gutter="5" wrap>
                      <Col span="12">
                        <span style={styles.SelectLabel}>供应商</span>
                        <IceFormBinder required name="name">
                          <Select
                            size="medium"
                            style={styles.Select}
                            dataSource={SupperDataList}
                          />
                        </IceFormBinder>
                        {/*<IceFormBinder required name="s_id">*/}
                        {/*  <Select*/}
                        {/*    size="medium"*/}
                        {/*    style={styles.Select}*/}
                        {/*  />*/}
                        {/*</IceFormBinder>*/}
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>个性化定制类别</span>
                        <IceFormBinder required name="class_id">
                          <CascaderSelect
                            expandTriggerType="hover"
                            size="medium"
                            style={styles.Select}
                            dataSource={this.state.GoodsTypeList}
                            listStyle={{ width: '180px' }}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>个性化定制名称</span>
                        <IceFormBinder required name="goods_name">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>型号</span>
                        <IceFormBinder required name="model">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>ADD</span>
                        <IceFormBinder required name="ADD">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>折射率</span>
                        <IceFormBinder required name="refractivity">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      {/* <Col span="12">
                        <span style={styles.SelectLabel}>直径</span>
                        <IceFormBinder required name="diameter">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col> */}
                      <Col span="12">
                        <span style={styles.SelectLabel}>是否球面</span>
                        <IceFormBinder required name="is_sphere">
                          <Select
                            size="medium"
                            style={styles.Select}
                            placeholder="请选择是否球面"
                          >
                            <Option value="球面">球面</Option>
                            <Option value="非球面">非球面</Option>
                          </Select>
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>是否渐进</span>
                        <IceFormBinder required name="is_gradual">
                          <Select
                            size="medium"
                            style={styles.Select}
                            placeholder="请选择是否渐进"
                          >
                            <Option value="渐进">渐进</Option>
                            <Option value="非渐进">非渐进</Option>
                          </Select>
                        </IceFormBinder>
                      </Col>

                      <Col span="12">
                        <span style={styles.SelectLabel}>特殊参数</span>
                        <IceFormBinder required name="case_value">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>颜色/膜层</span>
                        <IceFormBinder required name="color_layer">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>单位</span>
                        <IceFormBinder required name="unit">
                          <Select
                            dataSource={unit}
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>规格</span>
                        <IceFormBinder required name="spec">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>进货价</span>
                        <IceFormBinder required name="buying_price">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>零售价</span>
                        <IceFormBinder required name="retail_price">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>积分率</span>
                        <IceFormBinder required name="integral_rate">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>折扣</span>
                        <IceFormBinder required name="rebate">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                    </Row>
                    <Upload.Card
                      listType="card"
                      action={api.GoodsImg}
                      // headers={headers}
                      accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
                      formatter={(res, file) => {
                    return {
                    success: res.code === 200,
                    url: `${api.uri}${res.img_url}`,
                  };
                  }}
                      onPreview={onPreview}
                      onChange={onChange}
                      onSuccess={this.onSuccess}
                      onError={onError}
                      onRemove={this.onRemove}
                      defaultValue={defaultValue}
                    >

                    </Upload.Card>
                  </IceFormBinderWrapper>
                </Col>
                <Col span="2">
                  <div className="formSperator" />
                </Col>
                <Col span="11">
                  <h3 className="r-title">医疗器械生产经营企业资料</h3>
                  <Form onChange={this.handleForm1Change} value={SingleGoodsData} style={styles.form} inline size="medium" className="form2" id="form2" {...formItemLayout3} >
                    <FormItem label=" 生产企业" className="formItemAll" {...formItemLayout3}>
                      <Input id="esta_person" name="esta_person" size="large" className="input" />
                    </FormItem>
                    <FormItem label="生产许可证号" className="formItemAll" {...formItemLayout3}>
                      <Input
                        id="pro_number"
                        name="pro_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="生产许可证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker
                        id="pro_time"
                        name="pro_time"
                        className="input"
                        style={{width:'100%'}}
                      />
                    </FormItem>
                    <FormItem
                      label="经营许可证号"
                      className="formItemAll"
                    >
                      <Input
                        id="ope_number"
                        name="ope_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="经营许可证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker size="large" id="ope_time" name="ope_time" className="input" style={{width:'100%'}} />
                    </FormItem>
                    <FormItem
                      label="注册证号"
                      className="formItemAll"
                    >
                      <Input
                        id="reg_number"
                        name="reg_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="注册证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker size="large" id="reg_time" name="reg_time" className="input" style={{width:'100%'}} />
                    </FormItem>
                    <FormItem
                      label="有效期（月）"
                      className="formItemAll"
                    >
                      <Input
                        id="term_time"
                        name="term_time"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="国家医疗器械类别编号"
                      className="formItemAll"
                    >
                      <Input size="large" id="medical_number" name="medical_number" className="input" />
                    </FormItem>
                    <FormItem
                      label="医疗器械名称"
                      className="formItemAll"
                    >
                      <Input
                        id="medical_name"
                        name="medical_name"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="预留1"
                      className="formItemAll"
                    >
                      <Input size="large" id="m_reserve_one" name="m_reserve_one" className="input" />
                    </FormItem>
                    <FormItem
                      label="预留2"
                      className="formItemAll"
                    >
                      <Input size="large" id="m_reserve_two" name="m_reserve_two" className="input" />
                    </FormItem>
                  </Form>
                </Col>
              </Row>
            </IceContainer>
          </div>
        </Dialog>
        <Pagination
          style={styles.pagination}
          current={this.state.page}
          onChange={this.handlePaginationChange}
          total={countPage * perPage}
        />
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
  form1: {
    padding: '0 100px',
  },
  Select: {
    float: 'left',
    width: 'calc(100% - 100px)',
    height: '28px',
    maxWidth: '300px',
    margin: '10px 0',
    DatePicker: {
      width: 'calc(100% - 100px)',
      minWidth: '130px',
      float: 'left',
      maxWidth: '300px',
      margin: '10px 0',
    },
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '28px',
    float: 'left',
    margin: '10px 10px 10px 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
};
